<template>
  <div class="home">
    <van-nav-bar>
      <template #left>
        <div class="home-title">
         <div v-if="morning">早上好</div>
          <div v-if="lunch">中午好</div>
          <div v-if="after">下午好</div>
          <div v-if="eventing">晚上好</div>
          <div class="username one-text">{{Mineoff}}</div>
        </div>
      </template>
      <template #right>
        <van-search placeholder="输入商品名称" shape="round" @click="goSearch"/>
      </template>
    </van-nav-bar>
    
    <van-swipe @change="changeCurrentIndex" :autoplay="5000">

      <van-swipe-item v-for="(item, index) in bannerData" :key="index">
        <img @click="viewProduct(item.pid)" class="auto-img" :src="item.bannerImg" alt="">
      </van-swipe-item>

      <template #indicator>
          <div class="indicator-box">
            <div class="indicator-item" :class="{active: currentIndex === i}" v-for="(v, i) in bannerData.length" :key="i"></div>
          </div>
      </template>
    </van-swipe>

    <div class="product-box">
      <div class="line">
        <span>热卖推荐</span>
      </div>
      <div class="product-items">

        <Product class="product-item" v-for="(item, index) in hotProduct" :key="index" :product="item">
          <template #hot>
            <div class="hot-box">hot</div>
          </template>
        </Product>

      </div>
    </div>

  </div>
</template>

<script>

import '../assets/less/home.less';

import Product from '../components/Product.vue';

export default {
  name: 'Home',

  data() {
    return {
      currentIndex: 0,

      //轮播图数据
      bannerData: [],

      //热卖商品数据
      hotProduct: [],
       morning:false,
      lunch:false,
      after:false,
      eventing:false,
      nowTime:'',
      isLoading: false,
      Mineoff:[],
    };
  },

  created() {
    //生成data, 但是没有$el(没有生成<div id="app"></div>)
    this.getBannerData();

    this.getHotProduct();
    this.timeFormate(new Date());
    this.Nikname();

  },

  components: {
    Product
  },

  methods: {
     goSearch() {
      this.$router.push({ name: "Search" });
    },

    //切换轮播图
    changeCurrentIndex(index) {
      this.currentIndex = index;
    },

    //获取轮播图数据
    getBannerData() {

      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      });

      this.axios({
        //请求方式
        method: 'GET',
        url: this.baseUrl + '/banner',
        params: {
          appkey: this.appkey
        }
      }).then(res => {
        console.log('res getBannerData ==> ', res);
        this.$toast.clear();

        if (res.data.code === 300) {
          this.bannerData = res.data.result;
        } else {
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000
          })
        }
        
      }).catch(err => {
        this.$toast.clear();
        console.log('err ==> ', err);
      })
    },

    //获取首页热卖推荐商品
    getHotProduct() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      });

      this.axios({
        //请求方式
        method: 'GET',
        url: this.baseUrl + '/typeProducts',
        params: {
          appkey: this.appkey,
          key: 'isHot',
          value: 1
        }
      }).then(res => {
        console.log('res getHotProduct ==> ', res);
        this.$toast.clear();

        if (res.data.code === 500) {
          this.hotProduct = res.data.result;
        } else {
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000
          })
        }
        
      }).catch(err => {
        this.$toast.clear();
        console.log('err ==> ', err);
      })
    },
    timeFormate(timeStamp) {
      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      this.nowTime = hh ;
      console.log(this.nowTime);
      this.toggleTime();
    },
    toggleTime(){
      if(this.nowTime>=0 && this.nowTime<12){
        this.morning=true;
      }else{
        this.morning=false;
      }
       if(this.nowTime>=12 && this.nowTime<13){
        this.lunch=true;
      }else{
        this.lunch=false;
      }
       if(this.nowTime>=13 && this.nowTime<18){
        this.after=true;
      }else{
        this.after=false;
      }
       if(this.nowTime>=18 && this.nowTime<24){
        this.eventing=true;
      }else{
        this.eventing=false;
      }
    },

    //查看商品详情
    viewProduct(pid) {
      this.$router.push({name: 'Detail', params: {pid}});
    },
     Nikname() {
      let tokenString = this.$cookies.get("tokenString");
      // console.log("tokenString ==> ", tokenString);

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          console.log("res Nikname ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "B001") {

            this.Mineoff=res.data.result[0].nickName;
            // console.log(this.Mineoff);

          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  }
}
</script>